<template>
    <div>
        <div class="xtx-member-aside">
            <div class="user-manage">
              <h4>我的账户</h4>
              <div class="links">
                <a href="/personalCenters" class="router-link-active active"><router-link to="/personalCenters"> 个人中心 </router-link></a>
                <a href="javascript:;">消息通知</a>
                <a href="javascript:;">个人信息</a>
                <a href="javascript:;">安全设置</a>
                <a href="javascript:;">地址管理</a>
                <a href="javascript:;">我的积分</a>
                <a href="javascript:;">我的足迹</a>
                <a href="javascript:;">邀请有礼</a>
                <a href="javascript:;">幸运抽奖</a>
              </div>
              <h4>交易管理</h4>
              <div class="links">
                <a href="orde" class="active router-link-exact-active">我的订单</a>
                <a href="javascript:;">优惠券</a>
                <a href="javascript:;">礼品卡</a>
                <a href="javascript:;">评价晒单</a>
                <a href="javascript:;">售后服务</a>
              </div>
              <h4>我的收藏</h4>
              <div class="links">
                <a href="javascript:;">收藏的商品</a>
                <a href="javascript:;">收藏的专题</a>
                <a href="javascript:;">关注的品牌</a>
              </div>
              <h4>帮助中心</h4>
              <div class="links">
                <a href="javascript:;">帮助中心</a>
                <a href="javascript:;">在线客服</a>
              </div>
            </div>
          </div>
    </div>
</template>

<script>
    export default {
        name:'left'
    }
</script>

<style lang="scss" scoped>
div,p,ul,ol,li,dl,dt,dd,form,table,h1,h2,h3,h4,h5,h6,input,select,textarea,span,strong,em,b,i,u,a,img,*{padding:0;margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
body { font-family: '黑体'; font-size: 12px;  color: #000; background-color: #fff; }
ul,ol,li { list-style: none; }
h1,h2,h3,h4,h5,h6{ font-size: 14px;}
a img{ border: none;}
img,input,textarea,select,option,output,span,a,b,em,i,strong,u,s,button,label{ vertical-align:middle;}
table{border-collapse:collapse;}
a { background: transparent; text-decoration: none; color: #333; }
a:hover{  color: #f90; }
.clear{ clear:both; height: 0; width: 0; overflow: hidden;}
body,html{height: 100%;width: 100%;}
.xtx-member-aside {
    width: 220px;
    margin-right: 20px;
    border-radius: 2px;
    .user-manage {
      background-color: #fff;
      h4 {
        font-size: 18px;
        font-weight: 400;
        padding: 20px 52px 5px;
        border-top: 1px solid #f6f6f6;
      }
  
      .links {
        padding: 0 52px 10px;
      }
  
      a {
        display: block;
        line-height: 1;
        padding: 15px 0;
        font-size: 14px;
        color: #666;
        position: relative;
  
        &:hover{
          color: #27ba9b;
        }
        &.active {
          color: #27ba9b;
  
          &:before {
            display: block;
          }
        }
  
        &:before {
          content: "";
          display: none;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          position: absolute;
          top: 19px;
          left: -16px;
          background-color: #27ba9b;
        }
      }
    }
  }
</style>